<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据源</title>
</head>
<style>
    body{background:#F2F2F2;overflow:hidden}
    *{font-size: 12px;}
    .execButtonBar {background:#fff; display:flex; justify-content:space-between; height:4vh}
    .execButtonBar .title, .actions{display:flex;align-items:center; }
    .execButtonBar .title{font-weight:bold;}
    .execButtonBar .actions a{margin:0 0.1em; color:#fff; text-decoration-line:none; font-weight:bold; cursor:pointer; display:inline-block; width:4em; height:2em; text-align:center; line-height:2em; background:#4A90E2; }
    .execButtonBar .actions a:hover{background:#7EB7FA}
    #queryForm{background:#fff; margin: 0.3vh 0; padding:0 1em; height:3.5vh; line-height:3.5vh}
    .pagination{margin: 0.7vh 0 0 0}
    .tableData {width:100%; overflow-x:auto; overflow-y:auto; max-height:86.9vh;}
    table {table-layout: fixed;}
    table tr th {border-bottom: 1px solid #aaaaaa; background: #4A90E2; color: #fff; height:2em;}
    table tr td {border-bottom: 1px solid #cccccc;}
    .odd{background: #96c6f742}
    .even{background: #fffb7a30}
</style>
<body>
<div class="execButtonBar">
    <div class="title">菜单管理 ></div>
    <div class="actions">
        <a th:href="@{/admin/menu/menuEdit}" target="_self">新增</a>
    </div>
</div>
<form id="queryForm" th:method="GET" th:action="@{/admin/menu/getMenuPage}">
    <div>
        <laber>菜单编码</laber>
        <input th:type="text" name="menuCode" th:value="${param.menuCode}"/>
        <laber>菜单名称</laber>
        <input th:type="text" name="menuName" th:value="${param.menuName}"/>
        <laber>父级菜单ID</laber>
        <input th:type="text" name="parentMenuId" th:value="${param.parentMenuId}"/>
        <laber>URI</laber>
        <input th:type="text" name="menuUri" th:value="${param.menuUri}"/>
        <laber>状态</laber>
        <select name="state"/>
        <option id="chose" value="">--请选择--</option>
        <option id="succ" value="1" th:selected="${#request.getParameter('state') == '1'}">有效</option>
        <option id="fail" value="0" th:selected="${#request.getParameter('state') == '0'}">无效</option>
        </select>
        <button th:type="search">搜索</button>
    </div>
</form>
<div th:replace="/common/page::page"></div>
<div class="tableData">
<table>
    <thead>
        <tr>
            <th><input th:type="checkbox" th:class="table_checkedAll" th:onchange="checkedAll();"/>全选</th>
            <th th:text="序号">NO</th>
            <th th:text="菜单ID">menuId</th>
            <th th:text="父级菜单ID">parentMenuId</th>
            <th th:text="菜单编码">menuCode</th>
            <th th:text="菜单名称">menuName</th>
            <th th:text="菜单别名">menuAlias</th>
            <th th:text="类型">menuType</th>
            <th th:text="URI">menuUri</th>
            <th th:text="SUB_CODE">subCode</th>
            <th th:text="菜单层级">menuLevel</th>
            <th th:text="ICON">menuIcon</th>
            <th th:text="状态">state</th>
            <th th:text="排序">sort</th>
            <th th:text="创建时间">created</th>
            <th th:text="创建人">createdBy</th>
            <th th:text="更新时间">updated</th>
            <th th:text="更新人">updatedBy</th>
            <th th:text="操作"></th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="menu,iterStat: ${page.records}" th:class="${iterStat.odd}? 'odd':'even'">
            <td><input th:type="checkbox" th:value="${menu.menuId}" th:class="table_checkbox"/></td>
            <td th:text="${iterStat.count}">count</td>
            <td th:text="${menu.menuId}">menuId</td>
            <td th:text="${menu.parentMenuId}">parentMenuId</td>
            <td th:text="${menu.menuCode}">menuCode</td>
            <td th:text="${menu.menuName}">menuName</td>
            <td th:text="${menu.menuAlias}">menuAlias</td>
            <td>
                <span th:if="${menu.menuType} eq 1" th:text="菜单">menuType</span>
                <span th:if="${menu.menuType} eq 2" th:text="按钮">menuType</span>
            </td>
            <td th:text="${menu.menuUri}">menuUri</td>
            <td th:text="${menu.subCode}">subCode</td>
            <td th:text="${menu.menuLevel}">menuLevel</td>
            <td th:text="${menu.menuIcon}">menuIcon</td>
            <td>
                <span th:if="${menu.state} eq 1" th:text="有效">state</span>
                <span th:if="${menu.state} eq 0" th:text="无效">state</span>
            </td>
            <td th:text="${menu.sort}">sort</td>
            <td th:text="${#dates.format(menu.created, 'yyyy-MM-dd HH:mm:ss')}">created</td>
            <td th:text="${menu.createdBy}">createdBy</td>
            <td th:text="${#dates.format(menu.updated, 'yyyy-MM-dd HH:mm:ss')}">updated</td>
            <td th:text="${menu.updatedBy}">updatedBy</td>
            <td>
                <a href="javascript:void(0);" th:onclick="del([[${menu.menuId}]]);">删除</a>                &nbsp;&nbsp;&nbsp;
                <a th:href="@{/admin/menu/menuEdit(menuId = ${menu.menuId})}" target="_self">编辑</a>                &nbsp;&nbsp;&nbsp;
            </td>
        </tr>
    </tbody>
</table>
</div>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var xmlHttp;
    var delUrl= /*[[@{/admin/menu/delMenu}]]*/ null;

    var del = function (menuId) {
        if(window.confirm("确认删除？")) {
            xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function(){reloadPageCallback();};
            xmlHttp.open("POST", delUrl+"?menuId="+menuId, false);
            xmlHttp.send();
            return true
        } else {
            return false;
        }

    }
    var reloadPageCallback = function() {
        if (xmlHttp.readyState==4) {
            if (xmlHttp.status == 200) {
                window.location.reload()  //刷新页面
            }
        }
    }

    var checkedAll = function () {
        var elements = document.getElementsByClassName("table_checkbox");
        var checkAll = document.getElementsByClassName("table_checkedAll")[0];
        for (var i=0;i<elements.length; i++) {
            if(checkAll.checked) {
                elements[i].checked = true;
            } else {
                elements[i].checked = false;
            }
        }
    }

    /*]]>*/
</script>
</body>
</html>
